<template>
  <BaseChart ref="childRef" :option="options" class="chartMainContent"></BaseChart>
</template>
<script setup>
import { nextTick, onMounted, ref, shallowRef, watch } from 'vue'
import BaseChart from '../../../components/baseChart.vue'
const options = shallowRef()
const props = defineProps({
  data: {
    type: Array,
    default: () => {
      return []
    }
  },
  xData: {
    type: Array,
    default: () => {
      return []
    }
  }
})
const getBaseOptions = () => {
  return {
    color: ['#02D9FF', '#23EBC2', '#FAD760', '#F77723', '#0099FF', '#1A4EDB'],
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: 50,
      bottom: 10,
      left: 10,
      right: 60,
      containLabel: true
    },
    legend: {
      data: ['集热管失真空', '集热管破损', '内镜破损', '外镜破损', '集热管弯曲', '集热管变形'],
      textStyle: {
        color: '#fff'
      },
      left: 'right'
    },
    xAxis: {
      name: '时间',
      nameGap: 8,
      type: 'category',
      boundaryGap: false,
      nameTextStyle: {
        color: '#fff'
      },
      axisLabel: {
        color: '#fff'
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      splitLine: {
        show: false
      },
      data: ['2024年5月', '2024年6月', '2024年7月']
    },
    yAxis: {
      name: '类型',
      type: 'value',
      nameTextStyle: {
        color: '#fff'
      },
      axisLabel: {
        color: '#fff'
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      splitLine: {
        lineStyle: {
          width: 0.6,
          color: '#999'
        }
      }
    },
    series: [
      // {
      //   name: '集热管失真空',
      //   type: 'line',
      //   symbol: 'circle',
      //   data: [15, 30, 45]
      // },
      // {
      //   name: '集热管破损',
      //   type: 'line',
      //   symbol: 'circle',
      //   data: [50, 40, 20]
      // },
      // {
      //   name: '内镜破损',
      //   type: 'line',
      //   symbol: 'circle',
      //   data: [20, 40, 46]
      // },
      // {
      //   name: '外镜破损',
      //   type: 'line',
      //   symbol: 'circle',
      //   data: [10, 38, 35]
      // },
      // {
      //   name: '集热管弯曲',
      //   type: 'line',
      //   symbol: 'circle',
      //   data: [50, 30, 20]
      // },
      // {
      //   name: '集热管变形',
      //   type: 'line',
      //   symbol: 'circle',
      //   data: [35, 18, 26]
      // }
    ]
  }
}
watch(
  () => props.data,
  (newV) => {
    let resData = JSON.parse(JSON.stringify(newV))
    const option = getBaseOptions()
    option.xAxis.data = props.xData
    let series = []
    resData.forEach((item) => {
      series.push({
        name: item.name,
        type: 'line',
        symbol: 'circle',
        data: item.data
      })
    })
    option.series = series
    options.value = option
  },
  { deep: true }
)
// onMounted(() => {
//   nextTick(() => {
//     const option = getBaseOptions()
//     options.value = option
//   })
// })
</script>

<style scoped lang="scss">
.chartMainContent {
  height: 2.7rem;
}
</style>
